<template>
    <!-- pages/yidou/index.wxml -->
    <view>
        <view class="header">
            <image class="ydbg" :src="imgUrl + 'my-bg.png'"></image>
        </view>
        <view class="yidoubox">
            <view class="textbox">
                <text class="yidoutext1 mr-10">{{ accountObj.balance }}</text>
                <text class="yidoutext2">（总意豆）</text>
            </view>
            <view class="usebtn" @tap="goYidou">使用</view>
            <!-- <van-icon class="icon" name="question-o" size="14px" /> -->
        </view>
        <view class="title" v-if="expiredObj.expiredCoinSum > 0">{{ expiredObj.tips }}</view>
        <view class="detailbox">
            <view class="flexbox-sb centers box1" @tap="toDetails">
                <view class="centers">
                    <image class="icon-32 mr-10" :src="imgUrl + 'yidouimg.png'"></image>
                    <text>明细</text>
                </view>
                <view>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="flexbox-sb box2" v-for="(item, index) in assetlist" :key="index">
                <view>
                    <view class="box2text1">{{ item.remark }}</view>
                    <view>
                        <text class="box2text2">{{ item.createtime }}</text>
                        <!-- <text class="box2text2">12:00:03</text> -->
                    </view>
                </view>

                <view class="box2text3">
                    <text class="c-1" v-if="item.status == 1">+{{ item.amount }}</text>
                    <text class="c-2" v-if="item.status != 1">-{{ item.amount }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/yidou/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            accountObj: null,
            assetlist: [],
            type: 3,
            expiredObj: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取意豆
        _request
            .get('/wallet/getCoinInfo', {
                id: uni.getStorageSync('userid'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    accountObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 获取意豆明细

        _request
            .get('/bill/getDateColinListPage', {
                userId: uni.getStorageSync('userid'),
                page: 1
            })
            .then((res) => {
                this.setData({
                    assetlist: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 获取本月即将过期的意豆数量

        _request
            .get('/wallet/expiredCoinInfo', {
                id: uni.getStorageSync('userid'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    expiredObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 前往意豆商城
        goYidou() {
            // wx.showToast({
            //   title: '品牌商品入驻中,敬请期待！',
            //   icon:'none'
            // })
            // return;
            uni.navigateTo({
                url: '/pagesb/index/index'
            });
        },

        // 前往详情
        toDetails() {
            uni.navigateTo({
                url: '/pages/yidou/details/index'
            });
        }
    }
};
</script>
<style>
/* pages/yidou/index.wxss */
/* 顶部 */
.ydbg {
    width: 100%;
    height: 200rpx;
}

/* 意豆 */
.yidoubox {
    width: 710rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-radius: 5px;
    position: relative;
    top: -100rpx;
    margin: 0 20rpx;
}

.icon {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
}

.usebtn {
    position: absolute;
    right: 0;
    top: calc(50% - 24rpx);
    width: 100rpx;
    height: 48rpx;
    background: #ff8722;
    border-radius: 200rpx 0px 0px 200rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
}

.textbox {
    height: 200rpx;
    line-height: 200rpx;
    padding-left: 40rpx;
}

.yidoutext1 {
    height: 90rpx;
    font-size: 64rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 90rpx;
}

.yidoutext2 {
    height: 20rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20rpx;
}

.title {
    width: 100%;
    text-align: center;
    position: relative;
    top: -100rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    margin: 0rpx 20rpx 0 20rpx;
    padding: 0 20rpx 60rpx 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    position: relative;
    top: -100rpx;
}

.box1 {
    height: 124rpx;
    border-bottom: 1px solid #ededed;
    width: 100%;
}

.box2 {
    height: 144rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
}

.c-1 {
    color: #ff1717;
}

.c-2 {
    color: #53d393;
}
</style>
